<html>
<head>
    <title>game select</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../js/db.js"></script>
    <link type="text/css" rel="Stylesheet" href="../css/game-select.css"/>
    <link type="text/css" rel="Stylesheet" href="../css/game01.css"/>
    <link type="text/css" rel="Stylesheet" href="../css/game02.css"/>
    <link type="text/css" rel="Stylesheet" href="../css/game03.css"/>
</head>
<body>
<div id="wrap">
<div id="game-0">
<div id="logo">
    <img src="../images/image_0014_TNT.png">
</div>
<div id="game-content">
    <div class="screen01" style="">
        <div style="position: absolute; top: 20px; right: 50px;">
            <img src="images/trend__0000_S-a-m--l--th-c-an-t-t-nh-t-cho-s-c-kh-e-v--s--ph-t-tri-n-to-n-d.png">
        </div>
        <div class="title">hãy Chọn 5 cặp hình<br>
            giống nhau
        </div>
        <div class="image-iq">
            <img src="images/image_0038_Group-1-copy.png">
        </div>

        <a href="#">
            <div class="button-start"></div>
        </a>
    </div>

    <div class="screen02" style="display: none;">
        <div style="position: absolute; top: 20px; right: 50px;">
            <img src="images/trend__0000_S-a-m--l--th-c-an-t-t-nh-t-cho-s-c-kh-e-v--s--ph-t-tri-n-to-n-d.png">
        </div>
        <div class="title-select">xin mời anh chị chọn</div>
        <ul class="system">
            <li>
                <img src="images/trend__0001_1333769102Gain-kid-6-years-copy.png">
            </li>

            <li>
                <img src="images/trend__0000_s-t.png">
            </li>
        </ul>
        <a href="#">
            <div class="button-start"></div>
        </a>
    </div>

    <div class="screen03" style="display: none;">
        <div style="position: absolute; top: 20px; right: 50px;">
            <img src="images/trend__0000_S-a-m--l--th-c-an-t-t-nh-t-cho-s-c-kh-e-v--s--ph-t-tri-n-to-n-d.png">
        </div>
        <!--<div class="game-region-easy">-->
        <!--<div class="game-item">-->
        <!--<img src="images/Untitled-1_0000_Shape-3-copy-24.png">-->
        <!--</div>-->
        <!--</div>-->


        <!--<div class="game-region-difficult">-->
        <!--<div class="game-item">-->
        <!--<img src="images/Untitled-1_0000_Shape-3-copy.png">-->
        <!--</div>-->
        <!--</div>-->
    </div>

    <div class="screen04" style="display: none;">
        <div style="position: absolute; top: 20px; right: 50px;">
            <img src="images/trend__0000_S-a-m--l--th-c-an-t-t-nh-t-cho-s-c-kh-e-v--s--ph-t-tri-n-to-n-d.png">
        </div>

        <a href="#">
            <div class="button-replay"></div>
        </a>

        <div class="image-iq">
            <img src="images/image_0038_Group-1-copy.png">
        </div>
    </div>


    <div class="screen05" style="display: none;">
        <div style="position: absolute; top: 20px; right: 50px;">
            <img src="images/trend__0000_S-a-m--l--th-c-an-t-t-nh-t-cho-s-c-kh-e-v--s--ph-t-tri-n-to-n-d.png">
        </div>
        <a href="#">
            <div class="button-end"></div>
        </a>

        <div class="image-iq">
            <img src="images/image_0038_Group-1-copy.png">
        </div>
    </div>

</div>

<script type="text/javascript">
    var levelSelect = -1;
    var randomEasyArr = new Array(18);
    var randomDiffArr = new Array(24);
    var remainTime = 0;

    function randomize(_randomArr, n) {
        if(n == 18){
            for (var i = 0; i < n; i++) {
                if (i > 8)
                    _randomArr[i] = i - 9;
                else
                    _randomArr[i] = i;
            }
        }
        else{
            if(n == 24){
                for (var i = 0; i < n; i++) {
                    if (i > 11)
                        _randomArr[i] = i - 12;
                    else
                        _randomArr[i] = i;
                }
            }
        }


        for (var i = 0; i < _randomArr.length / 2; i++) {
            var temp1 = (Math.floor(Math.random() * 17) + 1);
            var temp2 = (Math.floor(Math.random() * 17) + 1);
            var temp = _randomArr[temp1];
            _randomArr[temp1] = _randomArr[temp2];
            _randomArr[temp2] = temp;
        }
    }

    function loadEasy(_randomEasyArr){
        $(".game-region-easy", ".screen03").remove();
        $(".game-region-difficult", ".screen03").remove();
        $(".screen03").append('<div class="game-region-easy">' +
                '</div>'
        );
        for (var i = 0; i < _randomEasyArr.length; i++) {
            $(".game-region-easy", ".screen03").append('<div class="game-item">' +
                    '<img src="' + pathGame03Easy + game03.easy[game03.easy.length - 1] + '" src2="' + pathGame03Easy + game03.easy[_randomEasyArr[i]] + '" click="true">' +
                    '</div>'
            );

        }
    }

    function loadDifficult(_randomDifficult){
        $(".game-region-easy", ".screen03").remove();
        $(".game-region-difficult", ".screen03").remove();
        $(".screen03").append('<div class="game-region-difficult">' +
                '</div>'
        );
        for (var i = 0; i < _randomDifficult.length; i++) {
            $(".game-region-difficult", ".screen03").append('<div class="game-item">' +
                    '<img src="' + pathGame03Different + game03.difficult[game03.difficult.length - 1] + '" src2="' + pathGame03Different + game03.difficult[_randomDifficult[i]] + '" click="true">' +
                    '</div>');


        }
    }

    function loadAlgorithm(_parent, _time){
        var  timeAllow_temp = _time;
        $("#footer-banner").append('<div class="count-down">thời gian còn lại: <span>' + _time + '</span></div>');
        timer = setInterval(function () {
            _time--;
            $(".count-down span", "#footer-banner").remove();
            $(".count-down", "#footer-banner").append('<span>' + _time + '</span>');

            if (_time == 0) {
                $(".screen04").css('display', 'block');
                $(".screen03").css('display', 'none');
                $(".count-down", "#footer-banner").remove();
                loadScreen05(timeAllow_temp);
                clearInterval(timer);
            }

        }, 1000);

        var countTag = 0;
        var isClick = true;
        var previousClick = "";
        var currentClick = "";




        var remainDyad = 5;//($(".game-item", _parent).length) / 2;


        $("img", _parent).click(function () {
            if (isClick) {
                if ($(this).attr('click') == 'true') {
                    $(this).attr('src', $(this).attr('src2'));
                    currentClick = $(this);
                    $(this).attr('click', 'false');
                    countTag++;

                    if (countTag == 1) {
                        previousClick = $(this);
                    }

                    else {
                        if (countTag == 2) {
                            isClick = false;
                            setTimeout(function () {
                                if (currentClick.attr('src2') == previousClick.attr('src2')) {
                                    remainDyad--;
                                    if (remainDyad == 0) {
                                        $(".screen04").css('display', 'block');
                                        $(".screen03").css('display', 'none');
                                        $(".count-down", "#footer-banner").remove();
                                        remainTime = timeAllow_temp - _time;
                                        loadScreen04(remainTime);
                                        clearInterval(timer);
                                        return;
                                    }
                                    currentClick.attr('click', 'false');
                                    previousClick.attr('click', 'false');
                                }
                                else {
                                    currentClick.attr('click', 'true');
                                    currentClick.attr('src', pathGame03Easy + game03.easy[game03.easy.length - 1]);
                                    previousClick.attr('click', 'true');
                                    previousClick.attr('src', pathGame03Easy + game03.easy[game03.easy.length - 1]);
                                }
                                countTag = 0;
                                isClick = true;
                            }, 200);
                        }
                        else {

                        }
                    }
                }
            }

        });
    }

    function loadScreen04(time){
        $(".screen04").show();
        $(".screen03").hide();
        $(".title", ".screen04").remove();
        $(".screen04").append('<div class="title">chúc mừng<br>Bạn đã hoàn thành<br>trong vòng <span>' + time + '</span> giây</div>');
    }

    function loadScreen05(time){
        $(".screen05").show();
        $(".screen04").hide();
        $(".screen03").hide();
        $(".title", ".screen05").remove();
        $(".screen05").append('<div class="title">rất tiếc<br>đã hết <span>' + time + '</span> giây</div>');
    }


    function reLoad()
    {
        clearInterval(timer);
        $(".screen01").show();
        $(".screen04").hide();
        $(".screen05").hide();
    }

    $(document).ready(function () {
        $(".button-start", ".screen01").click(function () {
            $(".screen02").css('display', 'block');
            $(".screen01").css('display', 'none');
        });

        $(".system li").click(function () {
            $(".button-start", ".screen02").css('display', 'block');
            $(".system li").removeClass("opacity");
            $(this).addClass("opacity");
            levelSelect = $(this).index();
        });

        $(".button-start", ".screen02").click(function () {

            $(".button-start", ".screen02").css('display', 'none');
            $(".system li").removeClass("opacity");


            $(".screen03").css('display', 'block');
            $(".screen02").css('display', 'none');
            switch (levelSelect) {
                case 0:
                    randomize(randomEasyArr, 18);
                    loadEasy(randomEasyArr, 45);
                    loadAlgorithm(".game-region-easy", 45);
                    break;
                case 1:
                    randomize(randomDiffArr, 24);
                    loadDifficult(randomDiffArr, 60);
                    loadAlgorithm(".game-region-difficult", 60);
                    break;
                default:
                    alert("Xin hãy chọn mức độ trò chơi");
            }
        });

        $(".button-end", ".screen05").click(function(){
            reLoad();
        });

        $(".button-replay", ".screen04").click(function(){
            reLoad();
        });
    });
</script>

<div id="footer-banner">
    <a href="../index.html"><img class="home-icon" src="../images/home_button.png"></a>
    <a href="#"><img class="abbott-icon" src="../images/image_0001_Abbott-logo.png"></a>
    <img src="../images/image_0002_Shape-8.png">
</div>
</div>
</div>
</body>
</html>